<template>
  <div class="feature" :class="[hover?'featurehover':'']" :style="customstyle" @mouseover="hover = true" @mouseleave="hover = false">
      <div class="foverlaybox d-flex jc-center ai-center" :style="{background:hoverBackground,color:textColor}">
        {{text}}
      </div>
      <img class="featureimg" v-lazy="img" alt="聚焦图片">
  </div>
</template>

<script>
export default {
  props: {
    img: String,
    link: String,
    customstyle: Object,
    hoverBackground: {
      type: String,
      default: '#BBE2DB',
    },
    text: String,
    textColor: {
      type: String,
      default: '#fff',
    },
  },
  data() {
    return {
      hover: false,
    }
  },
}
</script>

<style lang="scss" scoped>
.feature {
  border-radius: 0.3125rem;
  position: relative;
  overflow: hidden;
  .foverlaybox {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all 1s;
  }

  .featureimg {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    opacity: 1;
    transition: all 1s;
  }
}
.featurehover {
  .featureimg {
    transform: translateY(-100%);
  }
}
</style>